{% extends 'base.html' %}
{% load static %}
{% load points_extras %}

{% block title %}积分商城 - Meet活动聚{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'home' %}">首页</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'points:points_home' %}">我的积分</a></li>
                    <li class="breadcrumb-item active">积分商城</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- 用户积分信息 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h4 class="card-title mb-1">
                                <i class="bi bi-wallet2 me-2"></i>我的积分
                            </h4>
                            <div class="d-flex align-items-center">
                                <h2 class="mb-0 me-3">{{ user_points.available_points }}</h2>
                                <div>
                                    <small>总获得: {{ user_points.total_points }} | 已使用: {{ user_points.used_points }}</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 text-end">
                            <a href="{% url 'points:points_records' %}" class="btn btn-light me-2">
                                <i class="bi bi-list-check me-1"></i>积分记录
                            </a>
                            <a href="{% url 'points:exchange_history' %}" class="btn btn-outline-light">
                                <i class="bi bi-clock-history me-1"></i>兑换记录
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 商品列表 -->
    <div class="row">
        <div class="col-12 mb-3">
            <h3>积分商城</h3>
            <p class="text-muted">使用积分兑换精美奖品，让您的参与更有价值</p>
        </div>
    </div>

    <div class="row">
        {% for reward in rewards %}
        <div class="col-lg-4 col-md-6 mb-4">
            <div class="card h-100 reward-card">
                {% if reward.image %}
                <img src="{{ reward.image.url }}" class="card-img-top reward-image" alt="{{ reward.name }}">
                {% else %}
                <div class="card-img-top reward-image bg-light d-flex align-items-center justify-content-center">
                    <i class="bi bi-gift text-muted display-4"></i>
                </div>
                {% endif %}

                <div class="card-body d-flex flex-column">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <h5 class="card-title">{{ reward.name }}</h5>
                        <span class="badge bg-{% if reward.type == 'coupon' %}warning{% elif reward.type == 'privilege' %}info{% else %}success{% endif %}">
                            {{ reward.get_type_display }}
                        </span>
                    </div>
                    <p class="card-text text-muted small flex-grow-1">{{ reward.description|truncatewords:20 }}</p>

                    <div class="mt-auto">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <strong class="text-primary h5 mb-0">{{ reward.points_required }} 积分</strong>
                            <small class="text-muted">库存: {{ reward.stock }}</small>
                        </div>

                        <div class="d-grid">
                            {% if reward.stock > 0 %}
                                {% if user_points.available_points >= reward.points_required %}
                                    <a href="{% url 'points:reward_detail' reward.id %}" class="btn btn-primary">
                                        <i class="bi bi-cart-check me-1"></i>立即兑换
                                    </a>
                                {% else %}
                                    <button class="btn btn-secondary" disabled>
                                        <i class="bi bi-lock me-1"></i>积分不足
                                    </button>
                                    <small class="text-muted text-center mt-1">
                                        还差 {{ reward.points_required|add:user_points.available_points|add:"0" }} 积分
                                    </small>
                                {% endif %}
                            {% else %}
                                <button class="btn btn-outline-secondary" disabled>
                                    <i class="bi bi-x-circle me-1"></i>已售罄
                                </button>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="text-center py-5">
                <i class="bi bi-box text-muted display-1"></i>
                <h4 class="text-muted mt-3">暂无奖品</h4>
                <p class="text-muted">管理员正在准备更多精彩奖品，敬请期待！</p>
                <a href="{% url 'points:points_home' %}" class="btn btn-primary">返回积分首页</a>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<style>
.reward-card {
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.reward-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.reward-image {
    height: 200px;
    object-fit: cover;
}
</style>
{% endblock %}